<template>
	<view class="content">
		<view class="header">
			<view class="title">农户资料</view>
			<view class="first">
				<text>{{ nonghu.nickname }}</text>
				<text>{{ nonghu.mobile }}</text>
			</view>
			<view class="second">{{ nonghu.address }}</view>
		</view>
		<view class="group">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="title">
					<text>{{ item.project_name }}</text>
					<view v-if="item.status != 3" class="text">{{ item.status | statedata }}</view>
					<view
						@click="shenhe(item.id)"
						v-if="item.status == 3"
						class="text"
						style="border: 1px solid gray;line-height: 40px;width: 100px;text-align: center;border-radius: 5px;"
					>
						{{ item.status | statedata }}
					</view>
				</view>
				<view class="type">项目类型：{{ item.cate_name }}</view>
				<view class="type">服务项目：{{ item.cate_names }}</view>
				<view class="type">亩数：{{ item.number }}亩</view>
				<view class="name">申请人信息</view>
				<view class="info">{{ item.nickname }}：{{ item.mobile }}</view>
				<view class="info">{{ item.address }}</view>
				<view class="time">申请时间：{{ item.createtime_text }}</view>
				<view class="time">服务人员：{{ item.serve_nickname }}</view>
				<view class="time">完成时间：{{ item.complete_time }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			list: [],
			page: 1,
			last_page: 1,
			nonghu: {},
			id:{}
		};
	},
	onReachBottom() {
		if (this.last_page - this.page >= 0) {
			this.loadData();
			this.page++;
			
		}
	},
	computed: {
		...mapState({
			user: state => state.user //个人用户信息
		})
	},
	filters: {
		statedata(data) {
			if (data == 0) {
				return '未支付';
			} else if (data == 1) {
				return '待接收';
			} else if (data == 2) {
				return '进行中';
			} else if (data == 3) {
				return '完成确认中';
			} else if (data == 5) {
				return '待指派';
			} else {
				return '已完成';
			}
		}
	},
	onLoad(options) {
		// console.log(options);
		// console.log(decodeURIComponent(options.item));
		this.nonghu = JSON.parse(decodeURIComponent(options.item));
		this.id=this.nonghu.user_id
		this.loadData(this.nonghu.user_id);
		 console.log(this.id);
	},
	methods: {
		shenhe(id) {
			this.$http.post('/api/order/update', { status: 4, id: id }).then(res => {
				// console.log(res);
				this.$u.toast('操作成功');
				this.loadData(this.nonghu.user_id);
				uni.navigateBack({
					delta: 1
				});
			});
		},
		loadData(id) {
				console.log(this.page+"aaaa");
				console.log(this.id);
			this.$http
				.post('/api/userinfo/kehudetail', {
					user_id: this.id,
					limit:3,
					page: this.page,
				})
				.then(res => {
					this.last_page = res.data.data.last_page;
					console.log(this.page);
					if (this.page == 1) {
						this.list = res.data.data.data;
						this.page = 2;
						console.log(this.list);
					} else {
						console.log(444);
						this.list = this.list.concat(res.data.data.data);
						console.log(this.list)
					}
				});
		}
		// //获取服务人员
		// getList() {
		// 	this.$http.post('/api/userinfo/serveuser').then(res => {
		// 		let test = Object.entries(res.data.data);
		// 		// console.log(test);
		// 		let arr = Object.entries(res.data.data);
		// 		arr.forEach((item, index) => {
		// 			this.list.push({
		// 				text: item[1].nickname,
		// 				value1: item[1].user_id
		// 			});
		// 		});
		// 		// console.log(this.list[1].value1)
		// 	});
		// }
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 30rpx;
	box-sizing: border-box;
}
.header {
	background: rgba(255, 255, 255, 1);
	border-radius: 5px;
	padding: 30rpx;
	box-sizing: border-box;
	.title {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 0.66);
	}
	.first {
		margin-top: 30rpx;
		text {
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-right: 36rpx;
			&:last-child {
				font-size: 15px;
			}
		}
	}
	.second {
		margin-top: 36rpx;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}
.group {
	width: 690rpx;
	border-radius: 5px;
	margin-top: 30rpx;
	overflow: hidden;
	.item {
		padding: 30rpx;
		box-sizing: border-box;
		width: 690rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		margin-bottom: 30rpx;
		// height: 540rpx;
		.title {
			font-size: 17px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text {
				font-size: 17px;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(63, 195, 119, 1);
			}
		}
		.type {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-top: 29rpx;
		}
		.name {
			font-size: 17px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-top: 50rpx;
		}
		.info {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			margin-top: 28rpx;
		}
		.time {
			font-size: 17px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(63, 195, 119, 1);
			margin-top: 43rpx;
		}
	}
}
</style>
